<template>
  <div class="popover" :class="placement" :style="style">
    <div class="arrow"></div>
    <div class="popover-body">
      <slot />
    </div>
  </div>
</template>

<script>
export default {
  name: 'popover',
  props: {
    value: Boolean,
    zIndex: Number,
    position: {
      type: String,
      default: 'absolute'
    },
    placement: {
      type: String,
      default: 'bottom'
    }
  },
  computed: {
    style () {
      var {position, zIndex = 5, value} = this
      return {
        display: value ? 'block' : '',
        position,
        zIndex
      }
    }
  }
}
</script>

<style lang="scss">
  @import "../../assets/css/theme";
  .popover {
    color: $font-color;
    display: none;
    max-width: 20rem;
    line-break: auto;
    line-height: 1.5;
    word-wrap: normal;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  }
  .popover-body {
    border-radius: 6px;
    overflow: hidden;
  }
  .popover.top {
    bottom: 100%;
  }
  .popover.right {
    right: .5rem;
  }
  .popover.bottom {
    margin-top: 10px;
  }
  .popover.left {
    left: 0;
  }
  .popover-title {
    margin: 0;
    padding: 8px 14px;
    font-size: 14px;
    background-color: #f7f7f7;
    border-bottom: 1px solid #ebebeb;
    border-radius: 5px 5px 0 0;
  }
  .popover > .arrow,
  .popover > .arrow:after {
    display: block;
    position: absolute;
    border-color: transparent;
    border-style: solid;
    height: 0;
    width: 0;
  }
  .popover > .arrow {
    border-width: 11px;
  }
  .popover > .arrow:after {
    border-width: 10px;
    content: '';
  }
  .popover.top > .arrow {
    left: 50%;
    margin-left: -11px;
    border-bottom-width: 0;
    border-top-color: rgba(0, 0, 0, 0.25);
    bottom: -11px;
  }
  .popover.top > .arrow:after {
    content: '';
    bottom: 1px;
    margin-left: -10px;
    border-bottom-width: 0;
    border-top-color: #fff;
  }
  .popover.bottom > .arrow {
    left: 50%;
    margin-left: -11px;
    border-top-width: 0;
    border-bottom-color: rgba(0, 0, 0, 0.25);
    top: -11px;
  }
  .popover.bottom > .arrow:after {
    content: '';
    top: 1px;
    margin-left: -10px;
    border-top-width: 0;
    border-bottom-color: #fff;
  }
  .popover.right > .arrow {
    right: .5rem;
    left: auto;
  }
  .popover.left > .arrow {
    left: 1.5rem;
  }
</style>
